<!-- 金融中心 资金方管理 -->
<template>
  <div class>
    <p class="title">授信汇总</p>
    <el-row :gutter="12" style="margin-bottom:20px">
      <el-col :span="6" v-for="({label,prop},idx) in poolArray" :key="idx">
        <el-card shadow="hover">
          <div class="row-item" @click="toUrl(prop)">
            <div>{{label}}</div>
            <div>{{(poolMap[prop] || 0)|formatMoney }}元</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="flex">
      <p class="title">资金方管理</p>
      <div class="flex-item f-txr">
        <el-button size="small" type="primary" @click="addList">新增</el-button>
      </div>
    </div>

    <table-list
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableFormatter="tableFormatter"
      :hasSera="true"
      :activeBtn="activeBtn"
    ></table-list>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
    <addModal :visible.sync="lineVisible" :type="lineType" @onSave="formSave" :editform="editform" />
  </div>
</template>
<script>
import api from "@/api/apiPath";
import tableList from "@/components/common/tableList";
import utils from "@/common/utils";
import addModal from "./addListModal";
export default {
  name: "partyFundsManage",
  title: "资金方管理",
  components: {
    "table-list": tableList,
    addModal
  },
  data() {
    return {
      poolArray: [
        { prop: "lineofCredit", label: "总授信额度" },
        { prop: "keyongAmount", label: "可使用资金" },
        { prop: "usedAmount", label: "已使用资金" },
        { prop: "freezingAmount", label: "冻结资金" }
      ],
      poolMap: {},
      lineVisible: false,
      lineType: "add",
      editform: {},

      tableInfos: [
        { label: "资金方", prop: "fundSideName" },
        { label: "授信额度(元)", prop: "lineofCredit", type: "money" },
        { label: "利率", prop: "interestRate", type: "num" },
        { label: "合作周期", prop: "cooperation", type: "num" },
        { label: "可用周期(天)", prop: "availableCycle", type: "num" },
        {
          label: "已拆解资金(元)",
          prop: "dismantledFunds",
          type: "money",
          fn: this.toUsed
        },
        { label: "可使用资金(元)", prop: "availableFunds", type: "money" },
        { label: "合作状态", prop: "state" },
        { label: "操作人", prop: "operatorName" },
        { label: "操作时间", prop: "createTime", type: "time" },
        {
          label: "操作",
          prop: "changeBtn",
          fn: [
            { label: "编辑", fn: this.editList, type: "edit" },
            { label: "删除", fn: this.deleteList, type: "delete" }
          ]
        }
      ],
      tableData: [],
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0
    };
  },
  methods: {
    //格式化操作按钮
    activeBtn(row, prop, btns) {
      btns = btns.map(btn => {
        if (btn.type == "delete") {
          btn.disabled = row.dismantledFunds != 0;
        }
        if (btn.type == "edit") {
          //btn.disabled = row.state == 2;
        }
        return btn;
      });

      return btns;
    },
    formSave(type, form) {
      let url = "",
        msg = "";
      if (type == "add") {
        url = "/financialCenter/elianMeng/capitalSideAdd";
        msg = "添加成功";
      } else if (type == "edit") {
        url = "/financialCenter/elianMeng/capitalSideUpdate";
        msg = "编辑成功";
      }
      let { name, userId } = JSON.parse(window.localStorage.cmsUser);

      let params = Object.assign(form, {
        operatorId: userId,
        operatorName: name
      });
      this.$axios.post(url, form).then(res => {
        this.lineVisible = false;
        this.$message({
          message: msg,
          type: "success"
        });
        this.searchList();
      });
    },
    deleteList(row) {
      this.$axios
        .post(`financialCenter/elianMeng/capitalSideDelete`, { id: row.id })
        .then(res => {
          this.searchList();
          this.$message({
            message: "删除成功",
            type: "success"
          });
        });
    },
    toUrl(prop) {
      let propArray = ["usedAmount", "freezingAmount"];
      if (!propArray.includes(prop)) {
        return;
      }
      let value = {};
      if (prop == "usedAmount") {
        value = {
          ebillAuditStatus: 1 //第三方审核状态为审核成功
        };
      }
      if (prop == "freezingAmount") {
        value = {
          fundUseStatus: 2 //资金使用状态为冻结中
        };
      }
      this.$router.push({
        name: "fundUse",
        params: {
          type: "search",
          value: value
        }
      });
    },
    toUsed(row) {
      this.$router.push({
        name: "financialProductManage",
        params: {
          type: "search",
          value: {
            fundSideId: row.id
          }
        }
      });
    },
    editList(row, prop) {
      this.lineType = "edit";
      this.editform = { ...row };
      this.lineVisible = true;
    },
    addList() {
      this.lineType = "add";
      this.lineVisible = true;
    },
    searchList(pageNum) {
      this.pageNum = pageNum || this.pageNum;
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      this.$axios
        .post("/financialCenter/elianMeng/capitalSideList",param)
        .then(res => {
          this.tableData = res.list.list.map(item => {
            item.cooperation = `${item.cooperationStarTime} —— ${item.cooperationEndTime}`;
            return item;
          });

          this.poolMap = {
            lineofCredit: res.lineofCredit,
            usedAmount: res.usedAmount,
            freezingAmount: res.freezingAmount,
            keyongAmount: res.keyongAmount
          };
          this.totalSize = res.list.total;
        });
    },
    //表格格式化方法。prop对应array下标
    tableFormatter(prop, val) {
      if (prop == "state") {
        let statusMap = {
          1: "未执行",
          2: "执行中",
          3: "预到期",
          4: "执行到期"
        };
        return statusMap[val];
      }
      if (prop == "interestRate") {
        return val + "%";
      }
      return val;
    },
    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    }
  },
  created() {
    this.searchList(1);
  },
  activated() {
    this.searchList();
  },
  destroyed() {},
  filters: {
    formatMoney(val) {
      return utils.formatMoney(val);
    }
  }
};
</script>

<style lang="stylus" scoped>
.title {
  font-weight: 400;
  color: #1f2f3d;
  font-size: 17px;
}

.flex {
  display: flex;
  align-items: center;
}

.flex-item {
  flex: 1;
}

.f-txr {
  text-align: right;
}

.row-item {
  line-height: 32px;
  text-align: center;

  div {
    &:nth-child(1) {
      color: #666;
      font-size: 14px;
    }
  }
}
</style>
